import React, { useEffect, useState } from 'react'
// import styles from './index.module.scss'
import {
  Card,
  Breadcrumb,
  Form,
  Radio,
  Button,
  DatePicker,
  Table,
  Tag,
  Space,
  Modal,
} from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import { Link } from 'react-router-dom'
import { ArticleStatus } from 'api/constain'
import Channel from 'components/Channel'
import { delArticles, getArticles } from 'api/article'
import defaultImg from 'assets/error.png'

const { RangePicker } = DatePicker

export default function ArticleList() {
  const [articles, setArticles] = useState([])
  const [reqParams, setReqParams] = useState({ page: 1, per_page: 10 })
  const getAsyncArticles = async (reqParams) => {
    const res = await getArticles(reqParams)
    // console.log(res)
    setArticles(res.data)
  }

  useEffect(() => {
    getAsyncArticles(reqParams)
  }, [reqParams])

  const columns = [
    {
      title: '封面',
      dataIndex: '',
      render(data) {
        if (data.cover.type === 0) {
          return (
            <img
              src={defaultImg}
              alt=''
              style={{ width: 200, height: 120, objectFit: 'cover' }}
            />
          )
        }
        return (
          <img
            src={data.cover.images[0]}
            alt=''
            style={{ width: 200, height: 120, objectFit: 'cover' }}
          />
        )
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render(status) {
        const obj = ArticleStatus.find((item) => item.id === status)
        return <Tag color={obj.color}>{obj.name}</Tag>
      },
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      render(data) {
        return (
          <Space>
            <Button type='primary' shape='circle' icon={<EditOutlined />} />
            <Button
              type='primary'
              danger
              shape='circle'
              icon={<DeleteOutlined />}
              onClick={() => delArticle(data.id)}
            />
          </Space>
        )
      },
    },
  ]
  const { total_count, results, per_page, page } = articles

  return (
    <div>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to='/layout/home'>首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>文章列表</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        {/* 表单结构 */}
        <Form initialValues={{ status: -1 }} onFinish={onFinish}>
          <Form.Item label='状态' name='status'>
            <Radio.Group>
              {ArticleStatus.map((item) => (
                <Radio key={item.id} value={item.id}>
                  {item.name}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item label='频道' name='channel_id'>
            <Channel></Channel>
          </Form.Item>

          <Form.Item label='日期' name='date'>
            <RangePicker />
          </Form.Item>

          <Form.Item>
            <Button type='primary' htmlType='submit'>
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>

      <Card title={`根据筛选条件共查询到 ${total_count} 条结果：`}>
        <Table
          columns={columns}
          dataSource={results}
          rowKey='id'
          pagination={{
            position: ['bottomCenter'],
            total: total_count,
            pageSize: per_page,
            current: page,
            onChange: onChange,
          }}
        />
      </Card>
    </div>
  )
  function onFinish(values) {
    //未完成的筛选
    console.log(values)
  }
  function onChange(page, pageSize) {
    setReqParams({
      page,
      per_page: pageSize,
    })
  }
  function delArticle(id) {
    // console.log(id)
    Modal.confirm({
      title: '温馨提示',
      icon: <ExclamationCircleOutlined />,
      content: '你确定要删除这篇文章吗',
      onOk: async () => {
        //发送删除文章的请求
        await delArticles(id)
        getAsyncArticles(reqParams)
      },
    })
  }
}
